//提示信息对象
let notice;
//当前操作的列对象
let cols;
let isSuccess; //表格对象
// import converterDate from '../learn/converterDate'
layui.config({
    base: '../lay/dist/'
});
layui.use(['form', 'table', 'laydate', 'notice', 'upload'], function () {
    var $ = layui.jquery,
        form = layui.form,
        laydate = layui.laydate,
        table = layui.table;
    upload = layui.upload;
    notice = layui.notice;
    let isSelectFile=false;
    let uploadInst = upload.render({
        elem: '#selectImg',
        url: "/wx-image/saveOrUpdate",
        size:1024,
        accept: 'images' //只允许上传图片
        , acceptMime: 'image/*', //只筛选图片
        auto: false,
        bindAction: '#submit', // 指定可以上传的按钮
        choose: function (obj) {
            $("#carousel_img_container").show()
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                isSelectFile=true;
                $('#carousel_img').attr('src', result); //图片链接（base64）
            });
        }
        , done: function (res) {
            //如果上传失败
            if (res.code == 0) {
                notice.success("操作成功")
                layer.closeAll()
            } else {
                return layer.msg('上传失败' + res.data);
            }
            //上传成功
        },

    });


    /**
     * 表格主题渲染
     */
    table.render({
        elem: '#checkClass',
        url: '/wx-image/all',
        method: "post",
        parseData: function (res) {
            console.log(res.success)
            return {
                "code": res.success ? 0 : 1, //
                "count": res.total,
                "data": res.data
            }
        },
        toolbar: '#toolbarDemo',
        defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }],
        cols: [
            [
                {
                    field: 'xid', width: 80, title: '序号', sort: true, templet: function (d) {
                        return d.LAY_INDEX;
                    }
                },
                {field: 'id', title: 'ID', sort: true, hide: true},
                {
                    field: 'createTime', width: 150, title: '创建时间', sort: true, templet: function (d) {
                        return ConverterDate(d.createTime);
                    }
                },
                {field: 'title', title: '轮播标题'},
                {
                    field: 'image', title: '轮播图', templet: function (d) {
                        return '<span><img src="' + d.image + '" alt="" style="height: auto;width: auto; max-width: 100%; max-height: 100%;padding-left: 5px" onclick="showBigImage(this)""></span>';
                    }
                },
                {field: 'imageDesc', title: '轮播描述'},
                {
                    field: 'type', title: '轮播类型', templet: function (d) {
                        return "" + d.indexType.name;
                    }
                },
                {field: 'start', title: '轮播状态', templet: "#switchTpl"},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]
        ],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        page: true,
        skin: 'line'
    });
    /**
     *
     */
    $(function () {


    })

    /**
     * 监听搜索操作
     */
    form.on('submit(data-search-btn)', function (data) {
        let result = data.field;
        console.log(result)
        // return false
        //执行搜索重载
        table.reload('checkClass', {
            url: '/wx-image/search'
            , where: result
        },);
        notice.success("搜索执行成功！");

        return false;
    });

    /**
     * toolbar监听事件
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
        if (obj.event === 'selectAll') { //
            table.reload('checkClass', {
                url: '/wx-image/all'
            })
            notice.success("查询成功！");
        } else if (obj.event === 'importExcel') {


        } else if (obj.event === 'selectNow') {  //

        } else if (obj.event === 'addInfo') {
            isSelectFile=false;
            $("#submit").click(function () {
                //编辑和添加其实都是走的这里！
                let d = form.val("form");
                d.isAdd = true;
                console.log(d)
                if (!isSelectFile) {
                    notice.error("必须选择一张图片")
                }
                uploadInst.reload({
                    data: d
                });
            })
            layer.open({
                type: 1,
                shade: false,
                area: ["50%", "70%"],
                title: "添加轮播信息", //不显示标题
                content: $('#addContainer'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        }
    });

    /**
     * 清空添加容器的内容
     */
    function clearAddContainer() {
        form.val("form", {
            date: '',
            studentid: 0,
            classid: 0,
            classroomid: 0
        })
    }


    /**
     * 工具行监听(删除/编辑)
     * */
    table.on('tool(currentTableFilter)', function (obj) {
        let data = obj.data;
        cols = obj;
        if (obj.event === 'edit') {
            isSelectFile=false;
            $("#carousel_img").get(0).src=data.image
            //赋值：
            form.val("form",{
                title:data.title,
                imageDesc:data.imageDesc,
                href:data.href,
                indexTypeId: data.indexTypeId,
                start:data.start==1
            })
            //编辑；编辑首先如果添加图片是不会走那个文件上传的;
            $("#submit").click(function () {
                //编辑和添加其实都是走的这里！
                let d = form.val("form");
                d.isAdd = false;
                if (isSelectFile) {
                    uploadInst.reload({
                        data: d
                    });
                } else {
                    $.post("/wx-image/saveOrUpdate",d,res=>{
                        if (res.success) {
                            notice.success("操作成功")
                        } else {
                            notice.error("操作失败"+res.data)
                        }
                    })
                }

            })

            layer.open({
                type: 1,
                shade: false,
                area: ["50%", "70%"],
                title: "编辑轮播信息", //不显示标题
                content: $('#addContainer'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            });

        } else if (obj.event === 'delete') {
            layer.confirm('是否要删除此条记录？', function (index) {
                $.post("/wx-image/del", {id: obj.data.id}, function (result) {
                    // console.log(result)
                    if (result.success) {
                        notice.success("删除成功！");
                        obj.del()
                    } else {
                        notice.warning("删除失败！" + result.data);
                    }
                }, "json")
                layer.close(index);
            }, function (index) {
                layer.close(index);
            }, 'json');

        }

    });
    form.on('switch(start)', function (data) {
        let d = table.cache.checkClass[data.value - 1];
        console.log(data.elem.checked ? 1 : 2); //开关是否开启，true或者false
        $.post("/wx-image/saveOrUpdate", {
            "start": data.elem.checked ? 1 : 2, "indexTypeId": d.indexTypeId
            ,"id":d.id
        }, res => {
            if (res.success) {
                notice.success("操作成功")
            } else {
                notice.error("遇到异常，操作无效" + res.data)
            }
        })
    });
    form.on('select(addType)', function(data){
        if (data.value==-1) {
        //    弹框；  然后添加后关闭；
          let idx=  layer.open({
                type: 1,
                shade: false,
                area: ["40%", "30%"],
                title: "添加页面", //不显示标题
                content: $('#addType'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        //    添加类型；
            $("#addTypeBtn").click(function () {
                let name = $("#addTypeInput").val();
                $.post("/index-image-type/add",{name:name},res=>{
                    if (res.success) {
                        notice.success("添加成功！");
                        $('#indexTypeId option:last').remove()
                        $("#indexTypeId").append("<option value='"+res.data.id+"'>"+res.data.name+"</option>")
                        $("#indexTypeId").append("<option value='-1'>添加页面</option>")
                        form.render('select'); //刷新select选择框渲染
                        layer.close(idx);
                    } else {
                        notice.error("添加失败！" + result.data);
                    }
                })

            })
        }
    });

    /**
     * 设置提示信息属性
     * @type {{hideEasing: string, positionClass: string, hideDuration: string, debug: boolean, closeButton: boolean, extendedTimeOut: string, showEasing: string, onclick: null, showDuration: string, iconClass: string, timeOut: string}}
     */
    notice.options = {
        closeButton: true,//显示关闭按钮
        debug: false,//启用debug
        positionClass: "toast-bottom-right",//弹出的位置,
        showDuration: "300",//显示的时间
        hideDuration: "1000",//消失的时间
        timeOut: "4000",//停留的时间
        extendedTimeOut: "1000",//控制时间
        showEasing: "swing",//显示时的动画缓冲方式
        hideEasing: "linear",//消失时的动画缓冲方式
        iconClass: 'toast-info', // 自定义图标，有内置，如不需要则传空 支持layui内置图标/自定义iconfont类名
        onclick: null, // 点击关闭回调
    };

    //监听单元格编辑
    table.on('edit(currentTableFilter)', function (obj) {
        toggle.data = obj.data;
    });


});


/**
 * 图片缩放
 * @param e
 */
function showBigImage(e) {
    layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        shadeClose: true, //点击阴影关闭
        maxWidth: 500,
        maxHeight: 500,
        content: "<img style='height: auto;width: auto; max-width: 100%; max-height: 100%;  ' src=" + $(e).attr('src') + " />"
    });
}

